<template>
  <div>
    <div class="buttonView">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <div class="setUp">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="meta.title" label="路由名称" sortable width="180" />
        <el-table-column prop="id" label="路由Id" sortable width="180" />
        <el-table-column prop="pid" label="路由parantId" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- {{scope.row }} -->
            <el-button type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <dialogIndex ref="dialogIndex" />
    </div>
  </div>
</template>

<script>
import dialogIndex from './dialogIndex.vue'
import { deletePcRouter } from '@/api/setUp/index'
export default {
  components: {
    dialogIndex
  },
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getRoutes(),
    this.errorCaptured()
  },
  methods: {
    getRoutes() {
      this.tableData = this.$store.state.permission.allRoutes.slice(0, this.$store.state.permission.allRoutes.length - 1)
    },
    add() {
      this.$refs.dialogIndex.dialogVisible = true
    },
    del(e) {
      if (e.children.length > 0) {
        const obj = {}
        obj.id = e.id
        obj.pid = e.pid
        console.log(obj, 'obj')
        deletePcRouter(obj).then(res => {
          console.log(res, 'res')
        })
      }
      else{
        console.log(e.id)
        const obj = {}
        obj.id = e.id
        deletePcRouter(obj).then(res => {
          console.log(res, 'res')
        })
      }
    },
    errorCaptured(error,instance,info){
      console.log(error,instance,info)
    }

  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/all.scss';
.setUp{
    width: 60%;
    margin: $marginBox;
}
.buttonView{
  width: 60%;
  margin:$marginButton;
}
</style>
